<template>
  <div>
    <div class="zui-flex zcardRow zcardBtns" >
      <cube-button :primary="true" class="zbtn zuiReplayBtn" @click="zreplay()">销售上报</cube-button>
    </div>
    <div class="scroll-list-wrap" :style="{'height': getlistHeight}">
      <cube-scroll ref="scroll" :data="tableData" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
        <div class="zcardWrap">
          <div class="zcard" v-for="(v, index) in tableData" :key="index">
            <div class="zui-flex zcardRow">
              <div class="zlabel">医院</div>
              <div class="zdes">{{v.hospital}}</div>
            </div>
            <div class="zui-flex zcardRow">
              <div class="zlabel">物料</div>
              <div class="zdes">{{v.code}}</div>
            </div>
            <div class="zui-flex zcardRow">
              <div class="zlabel">名称</div>
              <div class="zdes">{{v.name}}</div>
            </div>
            <div class="zui-flex zcardRow">
              <div class="zlabel">预计销量</div>
              <div class="zdes">{{v.num | priceFormat(0,'',true)}}</div>
            </div>
            <div class="zui-flex zcardRow">
              <div class="zlabel">预测开票日期</div>
              <div class="zdes">{{v.kpdate}}</div>
            </div>

          </div>
        </div>
      </cube-scroll>
    </div>

    <cube-popup type="zuipopup" ref="zuipopup">
      <div class="zpopupWrap uni-tip">
        <div class="uni-tip-title">汇仁采销联动</div>
        <div class="uni-tip-subtit">{{tipsTxt}}</div>
        <div class="uni-tip-content">
          <div class="J_inputWrap">
            <input class="uni-input" type="number" v-model="invoiceId_temp" :maxlength="maxlength" :focus="triggerFocus_temp" />
          </div>
        </div>
        <div class="uni-tip-group-button">
          <div class="uni-tip-button" @click="hidezpop">取消</div>
          <div class="uni-tip-button" @click="surezpop">确定</div>
        </div>
      </div>
    </cube-popup>

    <cube-view></cube-view>
  </div>
</template>

<script>



import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import BusFactory from 'vue-happy-bus';
import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import Drawer from '@/components/drawer'
import {zSaleSubList} from '@/util/api';

export default {
  name: 'SaleSubList',
  components: {
    CubeView,
    CubePage,
    Drawer
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      bus: BusFactory(this),
      showLoading: true,
      tableData: [],
      total: 0,
      start: 1,
      pageSize: 5,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      options: {
        pullDownRefresh: {
          threshold: 60,
          txt: '正在刷新...'
        },
        pullUpLoad: {
          threshold: 60,
          txt: {
            more: '上拉加载更多',
            noMore: '没有更多数据了...'
          }
        },
        scrollbar: true,
        click: true,
        tap: true,
        taps: true,
      },
      getlistHeight: this.zutil.getlistHeight(88),
      searchOut: {},
      drawerShow: false,
      hospitalList: [],
      datePicker: null,
      maxlength: 20,
      triggerFocus_temp: false,
      invoiceId_temp: '',
      zuiPopObj: null,
      zuiPopIndex: 0,
      curEditObj: null,
      tipsTxt: ''
    }
  },
  created () {

  },
  mounted() {
    this.zuiPopObj = this.$refs['zuipopup'];
    this.bus.$on('pageRefresh', (searchOut) => {
      this.zutil.deepClone(this.searchOut, searchOut);
      this.resetPage();
      this.searchData();
    })
    this.fetchList();
  },
  watch: {

  },
  methods: {
    resetPage () {
      this.tableData = [];
      this.total = 0;
      this.start = 1;
    },
    onPullingDown() {
      // 下拉刷新
      this.resetPage();
      this.fetchList();
    },
    onPullingUp() {
      // 上拉加载更多
      if(this.total && this.tableData.length < this.total){
        this.fetchList();
      }else if(this.total && this.tableData.length == this.total){
        this.$refs.scroll.forceUpdate();
        return;
      }
    },
    searchData () {
      this.start = 1;
      this.fetchList();
    },
    async fetchList () {
      let tbl_param = {
        page: this.start,
        pagesize: this.pageSize
      }
      this.zutil.deepClone(tbl_param, this.searchOut);

      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zSaleSubList(tbl_param);
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();

      if(res.code == '0000'){
        if(res.data.list && res.data.list.length){
          this.tableData = this.tableData.concat(res.data.list);
          this.total = res.data.total;
          this.start++;
        }else{
          this.$refs.scroll.forceUpdate();
        }
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "获取待反馈列表失败！"}).show();
        this.$refs.scroll.forceUpdate();
      }
      // 如果微信确实无法触发点击事件，再放开这段代码
      // this.zutil.initBtnsClickEvent(this, '.zuiReplayBtn', this.zreplay);
    },
    zreplay () {

      this.$router.push("/forecast/saleSubList/saleAdd");

    },
    hidezpop () {
      this.invoiceId_temp = '';
      this.zuiPopObj.hide();
      this.triggerFocus_temp = false;
    },
    surezpop () {
      let val = parseFloat(this.invoiceId_temp) || 0;
      if(this.zuiPopIndex == 1){
        this.$set(this.curEditObj, 'lastThrSale', val);
      }else if(this.zuiPopIndex == 2){
        this.$set(this.curEditObj, 'stock', val);
      }else if(this.zuiPopIndex == 3){
        this.$set(this.curEditObj, 'salenum', val);
      }
      this.hidezpop();
    },
    showZuiPop (item, type) {
      this.zuiPopIndex = type;
      this.curEditObj = item;
      if(type == 1){
        this.tipsTxt = '请输入预测数量';
      }else if(type == 2){
        this.tipsTxt = '请输入库存数量';
      }else if(type == 3){
        this.tipsTxt = '请输入销售数量';
      }
      this.zuiPopObj.show();
      this.triggerFocus_temp = true;
    }
  }
}
</script>

<style scoped lang="scss">

.scroll-list-wrap {
  border-radius: 0;
}
.scroll-list-wrap .zcardWrap .zcard .zcardRow .zlabel {
  width: 120px;
}
</style>
